import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import Image from '@/components/Image'
import FeedbackActionMenu from '../FeedbackActionMenu'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
// 导入中文语言包
import 'dayjs/locale/zh-cn'
import { CenterPopup } from 'antd-mobile'
import { useState } from 'react'
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)

const ArticleItem = ({ article, channel_id }) => {
  const type = article.cover.type
  const images = article.cover.images
  const [visible, setVisble] = useState(false)
  // 点击x打开反馈的弹窗
  const onOpen = () => {
    setVisble(true)
  }
  // 关闭弹层
  const onClose = () => {
    setVisble(false)
  }

  return (
    <div className={styles.root}>
      <div
        className={classnames(
          'article-content',
          type === 3 ? 't3' : '',
          type === 0 ? 'none-mt' : ''
        )}
      >
        <h3>{article.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item, i) => (
              <div className="article-img-wrapper" key={i}>
                <Image src={item} alt="" />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{article.aut_name}</span>
        <span>{article.comm_count} 评论</span>
        <span>{dayjs(article.pubdate).fromNow()}</span>

        <span className="close">
          <Icon type="iconbtn_essay_close" onClick={onOpen} />
        </span>
      </div>
      <CenterPopup visible={visible} onMaskClick={onClose}>
        <FeedbackActionMenu
          article_id={article.art_id}
          channel_id={channel_id}
          onClose={onClose}
        ></FeedbackActionMenu>
      </CenterPopup>
    </div>
  )
}

export default ArticleItem
